<template>
    <div>
        <div class="content white-block">
            <div class="toolbar">
                <div class="provider">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input v-model="input" placeholder="请输入" class="input" @keyup.enter="query"></el-input>
                    <el-button type="primary" @click="getPage(1)">查询</el-button>
                    <span>状态</span>
                    <el-select v-model="statusVal" placeholder="请选择">
                        <el-option
                            v-for="item in statusOpt"
                            :key="item.statusVal"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="text-right">
                    <!--    <el-button type="primary" >节点迁移</el-button>-->
                    <!--    <el-button type="primary" @click="newSys=true">新建</el-button>-->
                </div>
            </div>
            <div class="table atomicTable mt20">
                <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns"
                               @row-click="handleClick"
                               v-loading="loading"
                               class="mt20">
                    <template slot="status" slot-scope="scope">
                        <span v-if="scope.row.status == 1">在用</span>
                        <span v-if="scope.row.status == 0">注销</span>
                    </template>
                    <template slot="operation" slot-scope="scope" @row-click.stop="handleClick">
                        <!--                        <el-link type="primary" :underline="false" class="mr10" @click="serListDetails">详情-->
                        <!--                        </el-link>-->
                        <el-link type="primary" :underline="false" class="mr10" @click.stop @click="gotolink(scope.row)">API
                        </el-link>
                    </template>
                </table-example>
                <page :data="page" v-if="page" class="mt30 page" @jumpPage="getPage"></page>
            </div>
        </div>
        <el-drawer
            title=""
            :visible.sync="serListDetailsFlag"
            :show-close="false"
            direction="rtl"
            size="70%"
        >
            <div class="details">
                <div class="detailsBox">
                    <div class="detailsMsg map-out">
                        <div class="box-head">
                            <!--                            <breadcrumb :title="'服务配置信息'"></breadcrumb>-->
                            <div class="sername">
                                服务名称
                                <span class="close" @click="atomicClose"><i class="el-icon-close"></i></span>
                            </div>
                            <span>{{name}}</span>
                            <!--                            <div class="atomic-table">-->
                            <!--&lt;!&ndash;                                <table-example :data="serConMsg" :tableColumn="headerMsg" :highLight="true"&ndash;&gt;-->
                            <!--&lt;!&ndash;                                               :slotColumns="slotColumns"&ndash;&gt;-->
                            <!--&lt;!&ndash;                                               class="mt20">&ndash;&gt;-->
                            <!--&lt;!&ndash;                                    <template slot="status" slot-scope="scope">&ndash;&gt;-->
                            <!--&lt;!&ndash;                                        <span v-if="scope.row.status == 1">在用</span>&ndash;&gt;-->
                            <!--&lt;!&ndash;                                        <span v-if="scope.row.status == 2">不在用</span>&ndash;&gt;-->
                            <!--&lt;!&ndash;                                    </template>&ndash;&gt;-->
                            <!--&lt;!&ndash;                                </table-example>&ndash;&gt;-->
                            <!--                            </div>-->
                            <div class="detailsMsg1 bgc">
                                <el-row>
                                    <el-col :span="4">
                                        <span>服务编码：</span>
                                        <p :title="serConMsg.servcode">
                                            {{serConMsg.servcode}}
                                        </p>
                                    </el-col>
                                    <el-col :span="4">
                                        <span>版本：</span>
                                        <p>
                                            {{serConMsg.servversion}}
                                        </p>
                                    </el-col>
                                    <el-col :span="4">
                                        <span>状态：</span>
                                        <p v-if="serConMsg.status == 1">在用</p>
                                        <p v-if="serConMsg.status == 0">注销</p>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>

                        <el-tabs v-model="activeName" @tab-click="tabClick">
                            <el-tab-pane label="服务消费者信息" name="first" class="tabsHeight">
                                <div class="tab-content">
                                    <div class="serConsumeMsg">
                                        <div class="current provider mapOutMsg">
                                            <breadcrumb :title="'服务消费者信息'" class="breadcrumb"></breadcrumb>
                                        </div>
                                        <div class="table mt30">
                                            <table-example :data="serConsumeTable" :tableColumn="serConsumeHeader"
                                                           :slotColumns="slotColumns1"
                                                           class="mt20">
                                                <template slot="codeId" slot-scope="scope">
                                                    <span>{{scope.$index+1}}</span>
                                                </template>
                                            </table-example>
                                            <!--                            <page :data="serConPage" v-if="serConPage" class="mt30 page"-->
                                            <!--                                  @jumpPage="serConsumePage"></page>-->
                                        </div>
                                    </div>
                                </div>

                            </el-tab-pane>
                            <el-tab-pane label="部署信息" name="second" class="tabsHeight">
                                <div class="deployMsg tab-content">
                                    <div class="current provider mapOutMsg">
                                        <breadcrumb :title="'部署信息'" class="breadcrumb"></breadcrumb>
                                    </div>
                                    <div class="deployBox mt30">
                                        <ul>
                                            <li v-for="item in deploy" :key="item.id">
                                                <div class="img" v-if="item.status === '1'">
                                                    <el-image
                                                        :src="'/static/images/use.png'"></el-image>
                                                </div>
                                                <div class="img" v-else>
                                                    <el-image
                                                        :src="'/static/images/nouse.png'"></el-image>
                                                </div>
                                                <span>{{item.instancename}}</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
        </el-drawer>
        <!-- 点击详情-->
        <!--        <transition name="slide">-->
        <!--            <router-view></router-view>-->
        <!--        </transition>-->
    </div>
</template>

<script>
    import dialogMsk from '../../components/dialog'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import breadcrumb from '../../components/breadcrumb'

    export default {
        data() {
            return {
                activeName: 'first',
                serListDetailsFlag: false,
                tableData: [],
                header: [
                    {
                        prop: 'servname',
                        label: '服务名称',
                        minWidth: 150,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'servcode',
                        label: '服务编码',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'servversion',
                        label: '版本',
                        minWidth: 60,
                        align: 'left',
                        headerAlign: 'left'
                    },
                    // {
                    //     prop: 'pphone',
                    //     label: '接入类型',
                    //     minWidth: '10%',
                    //     align: 'center'
                    // },
                    {
                        prop: 'overTime',
                        label: '超时时间(ms)',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        minWidth: 60,
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: 100,
                        align: 'center',
                        headerAlign: 'center',
                        fixed: 'right'
                    }
                ],
                slotColumns: ['operation', 'status'],
                options: [
                    {
                        value: '1',
                        label: '服务名称'
                    }, {
                        value: '2',
                        label: '服务编码'
                    }
                ],
                value: '1',
                statusOpt: [
                    {
                        value: '2',
                        label: '全部'
                    },
                    {
                        value: '1',
                        label: '在用'
                    }, {
                        value: '0',
                        label: '注销'
                    }
                ], // 状态
                statusVal: '2',
                input: '',
                page: null,
                index: 1,
                serConPage: null,
                serConsumeIndex: 1,
                serConsumeTable: [],
                serConsumeHeader: [
                    {
                        prop: 'codeId',
                        label: '序号',
                        minWidth: 80,
                        align: 'center',
                        headerAlign: 'center',
                        tooltip: true
                    },
                    {
                        prop: 'systemName',
                        label: '消费者系统',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'groupname',
                        label: '群组名称',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'ip',
                        label: 'IP',
                        minWidth: 100,
                        align: 'center',
                        headerAlign: 'center',
                        tooltip: true
                    }
                ],
                slotColumns1: ['codeId'],
                serviceid: '',
                deploy: [], // 部署
                atomcode: '',
                serConMsg: [], // 服务配置信息
                // headerMsg: [
                //     {
                //         prop: 'servname',
                //         label: '服务名称',
                //         minWidth: '25%',
                //         align: 'left'
                //     },
                //     {
                //         prop: 'servcode',
                //         label: '服务编码',
                //         minWidth: '25%',
                //         align: 'left'
                //     },
                //     {
                //         prop: 'servversion',
                //         label: '服务版本',
                //         minWidth: '25%',
                //         align: 'left'
                //     },
                //     {
                //         prop: 'status',
                //         label: '状态',
                //         minWidth: '25%',
                //         align: 'left'
                //     }
                // ],
                servcode: '',
                name: '',
                loading: false
            }
        },
        created() {
            let lett = this
            document.onkeydown = function (e) {
                let key = window.event.keyCode
                if (key === 13) {
                    lett.getPage(1)
                }
            }
        },
        mounted() {
            this.getData()
        },
        methods: {
            // 跳转到API详情页面
            gotolink(row) {
                this.servcode = row.servcode
                this.serListDetailsFlag = false
                this.$http.get('/APIEdit/selectDetail', {
                    servcode: this.servcode
                }).then(result => {
                    if (result.success) {
                        // let id = result.data.id
                        this.$router.push({path: '/APIEditor', query: {id: this.servcode}})
                    }
                })

            },

            // 分页
            getPage(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/EsbInboundMain/selectServiceList', {
                    current: this.index || 1,
                    size: 10,
                    message: this.input,
                    status: this.statusVal,
                    type: this.value
                }).then(result => {
                    if (result.success) {
                        this.loading = false
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                })
            },

            // 分页
            serConsumePage(serConsumeIndex) {
                if (serConsumeIndex) this.serConsumeIndex = serConsumeIndex
                this.$http.get('/EsbServiceConsumer/selectServiceList', {
                    serviceid: this.serviceid,
                    current: this.serConsumeIndex || 1,
                    size: 1000
                }).then(result => {
                    if (result.success) {
                        this.serConsumeTable = result.data.records
                        this.serConPage = result.data
                    }
                })
            },

            // 查询
            query() {
                this.$http.get('/EsbInboundMain/selectServiceList', {
                    current: this.index || 1,
                    size: 10,
                    message: this.input,
                    status: this.statusVal,
                    type: this.value
                }).then(result => {
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                })
            },

            getData() {
                this.$http.get('/EsbInboundMain/selectServiceList', {
                    current: this.index || 1,
                    size: 10,
                    message: this.input,
                    status: this.statusVal,
                    type: this.value
                }).then(result => {
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                })
            },
            // 原子服务重载弹框信息
            messagePrompt() {
                this.$alert('这是一段提示信息', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: `subapp02 IP:10.54.56.19.91,port:8011,Reload ok
                                      subapp01 IP:10.54.56.19.91,port:8011,Reload ok`
                        })
                    }
                })
            },
            serListDetails() {
                this.serListDetailsFlag = true
                // 服务消费信息
                this.$http.get('/EsbServiceConsumer/selectServiceList', {
                    serviceid: this.serviceid,
                    current: this.serConsumeIndex || 1,
                    size: 1000
                }).then(result => {
                    if (result.success) {
                        this.serConsumeTable = result.data.records
                        this.serConPage = result.data
                        delete this.serConPage['records']
                    }
                })
            },

            // 表格点击事件
            handleClick(row) {
                // console.log(row)
                this.serConMsg = []
                this.serConMsg = row
                this.activeName = 'first'
                this.serviceid = row.serviceid
                this.atomcode = row.atomcode
                this.servcode = row.servcode
                this.name = row.servname
                this.serListDetails()
            },

            tabClick(tab) {
                // console.log(tab.paneName)
                if (tab.paneName === 'second') {
                    // 部署信息
                    this.$http.get('/EsbServiceAtomDeploy/selectOne', {
                        deploytype: 0,
                        serviceid: this.serviceid
                    }).then(result => {
                        if (result.success) {
                            // if (result.data[i].appStatus === '1') {
                            //     result.data[i].deploySrc = 'http://pics.sc.chinaz.com/Files/pic/icons128/652/enable_server.png'
                            // } else {
                            //     result.data[i].deploySrc = 'http://pics.sc.chinaz.com/Files/pic/icons128/652/desable_server.png'
                            // }
                            this.deploy = result.data
                        }
                    })
                } else {
                    this.serListDetails()
                }
            },
            
            // 关闭弹窗
            atomicClose() {
                this.serListDetailsFlag = false
                this.activeName = 'first'
            }
        },
        components: {
            dialogMsk,
            tableExample,
            page,
            breadcrumb
        }
    }
</script>

<style scoped lang="less">

    .tab-content {
        margin-left: .2rem;
    }

    .breadcrumb {
        height: 0.15rem;
        margin-top: 0.4rem;
        margin-bottom: 0.2rem;
        padding-left: 0.1rem;
        border-left: 2px solid #5586FB;
    }

    .serConsumeMsg {
        width: 99%;
    }

    .detailsMsg1 {
        padding: 0.2rem 0 .1rem 0;
        font-size: 0.14rem;

        span {
            width: 2rem;
            color: #999;
            display: inline-block;
            font-size: .14rem;
        }

        p {
            /*display: inline-block;*/
            line-height: .3rem;
            color: #333;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100%;
        }
    }

    .close {
        float: right;
        font-size: .3rem;
        cursor: pointer;
    }

    .sername {
        /*float: left;*/
        font-size: .14rem;
        color: #999;
        margin-bottom: .1rem;
    }

    .box-head {
        padding: 0 .2rem;
        padding-top: 0.2rem;
        background-color: #F1F5FD;

        .sername {
            line-height: .35rem;
        }
    }

    .atomic-table {
        /*padding-bottom: .2rem;*/
    }

    .mapOutMsg {
        font-size: .16rem;
        margin-top: .2rem;

        span {
            /*float: left;*/
            margin-left: .2rem;
            position: relative;
            margin-bottom: .2rem;
        }

        span::before {
            content: "";
            position: absolute;
            left: -0.1rem;
            top: .02rem;
            width: 0.02rem;
            height: 0.15rem;
            background-color: #5586FB;
        }

        .el-link {
            font-size: .16rem;
            margin-right: .3rem;
        }
    }

    .content {
        width: 100%;

        .provider {
            span {
                margin-left: .1rem;
            }
        }
    }

    .details {
        width: 100%;
        position: relative;

        .icon {
            i {
                font-size: .3rem;
                position: absolute;
                right: -10px;
                top: -10px;
                color: #999;
            }
        }

        .detailsBox {
            height: 100%;
            /*margin-top: .2rem;*/
            /*background-color: pink;*/

            .serAllocation {
                /*margin-top: .2rem;*/
            }

            .btn {
                margin-right: 1rem;
            }

            /*.detailsMsg {*/
            /*    font-size: .16rem;*/

            /*    span {*/
            /*        !*color: #999;*!*/
            /*        width: 1.5rem;*/
            /*        !*display: inline-block;*!*/
            /*        text-align: right;*/
            /*    }*/

            /*    p {*/
            /*        display: inline-block;*/
            /*        line-height: .5rem;*/
            /*    }*/
            /*}*/

            .deployBox {
                width: 100%;

                li {
                    /*background-color: #eee;*/
                    display: inline-block;
                    height: 3rem;
                    width: 10%;
                    margin-right: .3rem;
                    margin-bottom: .3rem;
                    margin-left: .5rem;
                    text-align: center;

                    .img {
                        width: 1rem;
                        height: 1.15rem;
                        /*background-color: pink;*/
                        margin-left: 37%;
                        margin-top: .5rem;
                    }

                    span {
                        display: inline-block;
                        margin-top: .1rem;
                        margin-left: 45%;
                        font-size: .16rem;
                    }
                }
            }
        }
    }

    .toolbar {
        font-size: 0.16rem;
        line-height: 0.4rem;

        .current {
            > span {
                color: #999;
            }
        }
    }
</style>
